<template>
    <h1>用户详情信息注册表</h1>
        <table class="table table-bordered">
            <tr>
                <td>真实姓名</td>
                <td>
                    <input type="text" v-model="UserInfo.U_Name" placeholder="请输入真实姓名"/>
                </td>
            </tr>
            <tr>
                <td>身份证号</td>
                <td>
                    <input type="text" v-model="UserInfo.U_IdCard"  placeholder="请输入身份证号" @change="abc" />
                </td>
            </tr>
            <tr>
                <td>用户类型</td>
                <td>
                    <select v-model="UserInfo.UT_Id" >
                        <option value="0">==请选择用户类型==</option>
                        <option v-for="item in UserType":value= "item.UT_Id":key="item.UT_Id">
                            {{item.UT_Name}}
                        </option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>联系方式</td>
                <td>
                    <input type="text" v-model="UserInfo.U_Phone" placeholder="请输入联系方式"/>
                </td>
            </tr>
            <tr>
                <td>出生日期</td>
                <td>
                    <input type="date" v-model="UserInfo.U_Date" >
                </td>
            </tr>
            <tr>
                <td>性别</td>
                <td>
                    <input type="radio" name="sex" v-model="UserInfo.U_Sex" value="false" checked/>男
                    <input type="radio" name="sex" v-model="UserInfo.U_Sex" value="true"/>女
                </td>
            </tr>
            <tr>
                <td>年收入</td>
                <td>
                    <input type="text" v-model="UserInfo.U_Income"  placeholder="请输入年收入"/>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <button class="btn btn-primary" @click="SaveDate">注册</button>
                    <button class="btn btn-danger" @click="">取消</button>
                </td>
            </tr>

        </table>
</template>

<script setup lang="ts">
import { ref,onMounted } from 'vue'
import axios from 'axios'
import { useRoute } from 'vue-router'
import {useStore} from '../../store/index.ts'

//获取路由实例
const route = useRoute()

const store = useStore();
alert(store.UserId)

//alert(route.params.Uid)

//用于绑定是响应式数组
const UserType = ref([{
    UT_Id:1,
    UT_Name:"",
}])

//用于添加的响应式变量
const UserInfo = ref({
    U_Id:1,
    U_Name:"",
    U_IdCard:"",
    U_Phone:"",
    U_Date:"",
    U_Sex:"",
    U_Income:"",
    UT_Id:1,
})

//创建生命周期钩子
onMounted(()=>{
    LoadUserType();
})

//加载用户类型
const LoadUserType = ()=>{
    axios({
        method:'get',
        url:"http://localhost:53279/api/User/BindUserType",
    })
    .then(function(res){
        UserType.value = res.data;
        console.log(res.data);
    })
    .catch(function(err){
        console.log(err);
    })

}

function abc (){
    UserInfo.value.U_Date = 
    UserInfo.value.U_IdCard.substring(6,10) + "-" + 
    UserInfo.value.U_IdCard.substring(10,12) + "-" +
    UserInfo.value.U_IdCard.substring(12,14);
}


//添加用户详细信息
const SaveDate = () =>{

    if(UserInfo.value.U_Name==""){
        alert("真实姓名不能为空");
        return;
    }
    if(UserInfo.value.U_Phone==""){
        alert("手机号不能为空");
        return;
    }

    var reg = /^1[3456789]\d{9}$/;
    if(!reg.test(UserInfo.value.U_Phone)){
        alert("手机号格式不正确");
        return;
    }

    if(UserInfo.value.U_IdCard==""){
        alert("身份证号不能为空");
        return;
    }

    var reg2 = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
    if(!reg2.test(UserInfo.value.U_IdCard)){
        alert("身份证号格式不正确");
        return;
    }

    if(UserInfo.value.U_Income==""){
        alert("年收入不能为空");
        return;
    }

    if( Number(UserInfo.value.U_Income)<0){
        alert("年收入不能小于0");
        return;
    }

    if(Number(UserInfo.value.U_Income)<=0 && Number(UserInfo.value.U_Income)>=1000000){
        alert("年收入必须在1到1000000之间");
        return;
    }

    axios({
        method:'post',
        url:"http://localhost:53279/api/User/AddUserInfo",
        data:{
            U_Id:route.params.Uid,
            U_Name:UserInfo.value.U_Name,
            U_IdCard:UserInfo.value.U_IdCard,
            U_Phone:UserInfo.value.U_Phone,
            U_Date:UserInfo.value.U_Date,
            U_Sex:UserInfo.value.U_Sex,
            U_Income:UserInfo.value.U_Income,
            UT_Id:UserInfo.value.UT_Id,
        },
    })
    .then(function(res){
        if(res.data>0){
            alert("用户详细信息注册成功");
        } 
        else{
            alert("用户详细信息注册失败");
        }
    })
    .catch(function(err){
        console.log(err);
    })
}


</script>